import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { AuthRoute } from './components/AuthRoute';
import { useAppSelector } from './store';
import history from './utils/history';
// import Login from '@/pages/Login';
// import Layout from '@/pages/Layout';
// 1.1 懒加载  提高加载速度
const Login = React.lazy(() => import('@/pages/Login'));
const Layout = React.lazy(() => import('@/pages/Layout'));

// 创建其他页面
const Article = React.lazy(() => import('./pages/Article'));
const Chat = React.lazy(() => import('./pages/Profile/Chat'));
const ProfileEdit = React.lazy(() => import('./pages/Profile/Edit'));
const ProfileFeedback = React.lazy(() => import('./pages/Profile/Feedback'));
const Search = React.lazy(() => import('./pages/Search'));
const SearchResult = React.lazy(() => import('./pages/Search/Result'));

/*
  学习目标：配置路由
  步骤：
     1. 下包 react-router-dom@5.3.0  @types/react-router-dom@5.3.0
     2. 导入Router和Route组件，Switch组件
     3. 创建组件Layout和Login
     4. 导入并且设置匹配规则
*/

export default function App() {
  const state = useAppSelector((state) => state.user);
  console.log(`state`, state);
  return (
    <Router history={history}>
      {/* 1.2 懒加载 */}
      <React.Suspense fallback={<div>loading...</div>}>
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/search" component={Search} />
          <Route path="/article/:id" component={Article} />
          <Route path="/search/result" component={SearchResult} />
          {/* <Route path="/profile/edit" component={ProfileEdit} /> */}
          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />
          <Route path="/" component={Layout}></Route>
        </Switch>
      </React.Suspense>
    </Router>
  );
}
